/* 设置变量 */
/* :root {
  --whiteColor: #fff;
} */
@property --size-y {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}
@property --size-x {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}
@property --transition-time {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

body {
  margin: 0
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}

.txt {
  background: linear-gradient(#fc0, deeppink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: 400px;
  height: 200px;
  /* background: url(./001.png); */
  -webkit-mask: paint(maskChange);
  --size-y: 10;
  --size-x: 20;
  --transition-time: 1;
  transition: --transition-time 0.5s linear;  /* 对 --transition-time 这个变量进行过渡 */
}
.txt-hide {
  --transition-time: 0;
}
.txt-show {
  --transition-time: 1;
}